<template>
  <div class="mock-exam">
    <div class="header">
      <div class="header-left">
        <div class="logo">
          <img 
            src="/logo.svg" 
            alt="Logo" 
            class="logo-img" 
            @error="handleLogoError" 
            @load="logoLoaded = true"
            v-show="logoLoaded"
          />
          <span class="logo-text" v-show="!logoLoaded">面试题</span>
        </div>
        <h2>模拟题详情</h2>
      </div>
      <button class="btn btn-primary" @click="goBack">返回题库</button>
    </div>

    <div v-if="loading" class="loading-container">
      <div class="loading-icon">✨</div>
      <div class="loading-text">{{ loadingMessage }}</div>
      <div class="loading-tips">{{ loadingTips }}</div>
    </div>
    
    <div v-else-if="mockExam" class="exam-content">
      <div v-for="(questionSet, index) in mockExam.mockQuestions" :key="index" class="question-set">
        <div class="question-set-header">
          <h3>题目集合 {{ index + 1 }}</h3>
          <p class="overview">{{ questionSet.overview }}</p>
        </div>

        <div v-for="(item, itemIndex) in questionSet.questionItems" :key="itemIndex" class="question-item">
          <div class="question-title">
            {{ itemIndex + 1 }}. {{ item.question }}
          </div>

          <div class="options">
            <div
              v-for="(option, optIndex) in item.options"
              :key="optIndex"
              class="option-item"
              :class="{ 'correct': option.isCorrect }"
            >
              <span class="option-key">{{ option.optionKey }}.</span>
              <span class="option-value">{{ option.optionValue }}</span>
            </div>
          </div>

          <div class="answer-section">
            <div class="answer-label">正确答案：</div>
            <div class="answer-value">{{ item.answer }}</div>
          </div>

          <div v-if="item.explanation" class="explanation">
            <div class="explanation-label">解析：</div>
            <div class="explanation-value">{{ item.explanation }}</div>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import api from '@/utils/api'
import type { MockExamVO } from '@/types/interview'

const router = useRouter()
const route = useRoute()

const loading = ref(false)
const mockExam = ref<MockExamVO | null>(null)
const loadingMessage = ref('正在为您生成模拟题...')
const loadingTips = ref('AI正在分析面试题，请稍候')

// Logo相关
const logoLoaded = ref(false)
const handleLogoError = () => {
  logoLoaded.value = false
}

const generateMockExam = async () => {
  const id = route.query.id as string
  const title = route.query.title as string
  const difficulty = route.query.difficulty as string
  const tags = route.query.tags as string
  
  if (!id || !title) {
    alert('缺少必要参数')
    router.push({ name: 'InterviewQuestionList' })
    return
  }

  loading.value = true
  loadingMessage.value = '正在为您生成模拟题...'
  loadingTips.value = 'AI正在分析面试题，请稍候'
  
  try {
    // 构建用户消息
    const userMessage = title
    
    // 调用生成接口
    const response = await api.post('/bailing/generate-mock-exam', null, {
      params: {
        interviewQuestionId: id,
        userMessage: userMessage
      }
    })
    
    if (response.data.code === 200) {
      mockExam.value = response.data.data
      loadingMessage.value = '生成完成！'
      loadingTips.value = ''
    } else {
      loadingMessage.value = '生成失败'
      loadingTips.value = response.data.message || '请稍后重试'
    }
  } catch (error) {
    console.error('生成模拟题失败:', error)
    loadingMessage.value = '生成失败'
    loadingTips.value = '请稍后重试'
  } finally {
    loading.value = false
  }
}

const goBack = () => {
  router.push({ name: 'InterviewQuestionList' })
}

onMounted(() => {
  // 从路由 state 中获取传递的数据
  const state = history.state
  if (state?.forward?.mockExam) {
    mockExam.value = state.forward.mockExam
  } else {
    // 如果没有传递数据，开始生成模拟题
    generateMockExam()
  }
})
</script>

<style scoped>
.mock-exam {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
}

.logo-img {
  max-height: 40px;
  max-width: 120px;
  object-fit: contain;
}

.logo-text {
  font-size: 20px;
  font-weight: bold;
  color: #409eff;
  letter-spacing: 1px;
}

.header h2 {
  margin: 0;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-primary {
  background-color: #409eff;
  color: white;
}

.btn:hover {
  opacity: 0.8;
}

.exam-content {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question-set {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 2px solid #eee;
}

.question-set:last-child {
  border-bottom: none;
}

.question-set-header {
  margin-bottom: 24px;
}

.question-set-header h3 {
  margin: 0 0 8px 0;
  color: #303133;
}

.overview {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
}

.question-item {
  margin-bottom: 24px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
}

.question-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
}

.options {
  margin-bottom: 16px;
}

.option-item {
  padding: 12px;
  margin-bottom: 8px;
  background: white;
  border: 2px solid #e4e7ed;
  border-radius: 6px;
  transition: all 0.3s;
}

.option-item.correct {
  border-color: #67c23a;
  background: #f0f9ff;
}

.option-item:hover {
  border-color: #409eff;
}

.option-key {
  font-weight: 600;
  color: #409eff;
  margin-right: 8px;
}

.option-value {
  color: #606266;
}

.answer-section {
  margin-top: 16px;
  padding: 12px;
  background: #fff7e6;
  border-left: 4px solid #faad14;
  border-radius: 4px;
}

.answer-label {
  font-weight: 600;
  color: #faad14;
  margin-bottom: 4px;
}

.answer-value {
  color: #303133;
  font-size: 16px;
}

.explanation {
  margin-top: 16px;
  padding: 12px;
  background: #f6ffed;
  border-left: 4px solid #52c41a;
  border-radius: 4px;
}

.explanation-label {
  font-weight: 600;
  color: #52c41a;
  margin-bottom: 4px;
}

.explanation-value {
  color: #606266;
  line-height: 1.6;
}

.loading-container {
  text-align: center;
  padding: 60px 40px;
}

.loading-icon {
  font-size: 64px;
  margin-bottom: 20px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

.loading-text {
  font-size: 20px;
  font-weight: 600;
  color: #409eff;
  margin-bottom: 12px;
}

.loading-tips {
  font-size: 14px;
  color: #909399;
}

.no-data {
  text-align: center;
  padding: 40px;
  color: #909399;
}
</style>

